<template>
  <div class="index">
    <div class="menu-left">
      <AMenu></AMenu>
    </div>
    <keep-alive :exclude="noCatchArr">
      <router-view style="flex: 1;" v-show="showType == 'app'" />
    </keep-alive>
    <!-- web应用 start -->
    <div
      v-show="showType == 'web'"
      style="flex:1;display:flex;flex-direction: column;position: relative;"
    >
      <WebViewIndex
        v-for="(url, index) in webApps"
        v-show="webAppOpenUrl == url"
        :key="index"
        :webUrl="url"
      >
      </WebViewIndex>
    </div>
  </div>
</template>

<script>
import AMenu from "@/components/AMenu";
import Alyx from "@/components/alyx/Alyx";
import Cd from "@/components/cd/Cd";
import WebViewIndex from "@/components/webview/WebViewIndex";

export default {
  components: {
    AMenu,
    Alyx,
    Cd,
    WebViewIndex
  },
  data() {
    return {
      showType: "app",
      noCatchArr: this.$store.state.noCatchArr,
      //已经打开的web应用
      webApps: [],
      webAppOpenUrl: "",
      webAppMapIndex: new Map()
    };
  },
  methods: {
    changeUrl(url) {
      this.webAppOpenUrl = url;
    }
  },
  watch: {
    $route: {
      //监听路由变化
      handler: function(to, from) {
        var _this = this;
        if (to.query.type && to.query.type == "web") {
          this.showType = "web";
          this.webAppOpenUrl = to.query.url;
          var index = -1;
          for (let i = 0; i < this.webApps.length; i++) {
            if (this.webApps[i] === this.webAppOpenUrl) {
              index = i;
              break;
            }
          }
          //关闭应用
          if (index >= 0 && to.query.operation == "remove") {
            this.webAppOpenUrl = "";
            this.showType = "app";
            this.webApps.splice(index, 1);
            _this.webAppMapIndex.delete(to.query.url);
            this.$router.push("/").catch(err => {});
            return;
          }

          //重新加载
          if (index >= 0 && to.query.operation == "reload") {
            this.webApps.splice(index, 1);
            this.webAppMapIndex.delete(to.query.url);
            setTimeout(() => {
              _this.webAppMapIndex.set(to.query.url, _this.webApps.length);
              _this.webApps.push(to.query.url);
            }, 50);
            return;
          }

          //已存在打开的程序
          if (index >= 0) {
            return;
          }

          _this.webAppMapIndex.set(to.query.url, _this.webApps.length);
          _this.webApps.push(to.query.url);
          return;
        }
        this.showType = "app";
        this.noCatchArr = this.$store.state.noCatchArr;
      }
    }
  }
};
</script>

<style lang="less">
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow-y: auto;

  .index {
    display: flex;
    box-sizing: border-box;
    height: 100%;
    padding: 6px;

    .turn {
      animation: turn 1s linear infinite;
    }

    .choice-user {
      overflow: hidden;
      font-size: 0.8rem;
      z-index: 99999999;
      color: #95a5a6;
      position: absolute;
      width: 10rem;
      right: 10px;
      top: 2rem;
      background: #ffffff;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
      border-radius: 4px;

      .item {
        padding: 4px 10px;
        line-height: 1.2rem;
        display: flex;

        .name {
          flex: 1;
          overflow: hidden;
        }

        i {
          margin-left: 4px;
          line-height: 1.2rem;
          cursor: pointer;
        }

        i:hover {
          color: #e74c3c;
        }
      }

      .item:hover {
        background: #f1f1f1;
      }
    }

    .add-user-modal {
      font-size: 0.8rem;
      z-index: 99999999;
      color: #95a5a6;
      position: absolute;
      right: 10px;
      top: 2rem;
      padding: 10px;
      background: #ffffff;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
      border-radius: 4px;

      .add-user-bottom-cancel {
        cursor: pointer;
        margin-right: 10px;
        padding: 4px 20px;
        color: #7f8c8d;
        background: #ecf0f1;
        float: right;
        border-radius: 4px;
      }

      .add-user-bottom {
        cursor: pointer;
        padding: 4px 20px;
        color: #ffffff;
        background: #3498db;
        float: right;
        border-radius: 4px;
      }

      .add-user-bottom:hover {
        color: #ffffff;
        background: #2980b9;
      }

      input {
        font-size: 0.8rem;
        border: none;
        outline: none;
        background: #f5f5f5;
        padding: 4px 10px;
        color: #bdc3c7;
      }
    }

    .loading.loading-hide {
      opacity: 0;
      z-index: -1;
    }

    .loading.loading-show {
      opacity: 1;
      z-index: 9999;
    }

    .loading {
      transition: all 1s ease-in-out;
      left: 0;
      top: 0;
      z-index: 9999;
      background: rgba(200, 200, 200, 0.9);
      position: absolute;
      width: 100%;
      height: 100%;

      .icon {
        text-align: center;
        position: relative;
        top: 50%;

        i {
          animation: turn 1s linear infinite;
          font-size: 2rem;
          color: #3498db;
        }

        p {
          margin-top: 10px;
          color: #3498db;
        }
      }
    }

    .operation-bar {
      display: flex;
      border-bottom: 1px rgb(221, 221, 221) solid;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      box-sizing: border-box;
      color: #7f8c8d;
      width: 100%;
      background: #ffffff;
      padding: 4px 10px;

      .url-input {
        width: 20rem;
        border: none;
        outline: none;
        background: #f5f5f5;
        padding: 4px 10px;
        color: #bdc3c7;
      }

      i {
        cursor: pointer;
        margin-right: 10px;
      }

      i:hover {
        color: #3498db;
      }

      .left {
        flex: 1;
      }

      .right {
        display: flex;

        .choice-user-div {
          margin-right: 10px;
          cursor: pointer;
        }

        i {
          line-height: 1.4rem;
        }
      }
    }

    .web-div {
      position: relative;
      flex: 1;
      width: 100%;
      height: 100%;

      .webview {
        width: 100%;
        height: 100%;
      }
    }

    .plan-right {
      background: #ffffff;
      border-radius: 6px;
      flex: 1;
      height: 100%;
      margin-left: 10px;
      overflow: auto;
    }

 

    .menu-left {
      z-index: 999999;
      margin-right: 10px;
    }
  }
}
</style>
